<template>
  <div>
    <el-row :gutter="100">
      <el-col :span="8">
        <el-card>
          <div>
            <el-icon class="el-icon-document-copy card-icon"/>
          </div>
          <div>
            <div class="text-content">试卷总数</div>
            <div class="count-content">{{ cardCount.examPaperCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div>
            <el-icon class="el-icon-tickets card-icon"/>
          </div>
          <div>
            <div class="text-content">题目总数</div>
            <div class="count-content">{{ cardCount.questionCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div>
            <el-icon class=" el-icon-document-checked card-icon"/>
          </div>
          <div>
            <div class="text-content">答卷总数</div>
            <div class="count-content">{{ cardCount.examPaperAnswerCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="100">
      <el-col :span="8">
        <el-card>
          <div>
            <el-icon class="el-icon-document card-icon"/>
          </div>
          <div>
            <div class="text-content">答题总数</div>
            <div class="count-content">{{ cardCount.examPaperQuestionCustomerAnswerCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div>
            <el-icon class="el-icon-s-custom card-icon"/>
          </div>
          <div>
            <div class="text-content">教师总数</div>
            <div class="count-content">{{ cardCount.teacherCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div>
            <el-icon class="el-icon-user card-icon"/>
          </div>
          <div>
            <div class="text-content">学生总数</div>
            <div class="count-content">{{ cardCount.studentCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Home',
  mounted() {
    const url = "/admin/home/card/count";
    this.axios.get(url).then(resp => {
      this.cardCount = resp.data;
    })
  },
  data() {
    return {
      cardCount: {},
    }
  },
  methods: {},
}
</script>

<style scoped>
.el-row {
  margin: 2em;
}

.el-card {
  height: 11em;
}

::v-deep(.el-card__body) {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 8em;
}

.card-icon {
  font-size: 4.5em;
  color: #409EFF;
}

.text-content {
  font-size: 2em;
}

.count-content {
  font-size: 1.5em;
  color: #F56C6C;
  margin-top: 10px;
}
</style>